<template>
  <ul class="todo-list" v-if="list.length">
    <li class="todo-item" v-for="(item, index) in list" :key="item.id">
      <el-checkbox
        v-model="item.isCompleted"
        :label="item.title"
        @change="handleChecked(index)"
      ></el-checkbox>
      <el-button
        type="text"
        :icon="Delete"
        @click="handleDel(index)"
      ></el-button>
    </li>
  </ul>
  <p class="todo-nodata" v-else>暂无任务</p>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'TodoList',
  emits: ['onDel', 'onChecked'],
  setup(props, { emit }) {
    const store = useStore()
    let list = computed(() => {
      return store.state.list
    })
    const handleDel = (index) => {
      emit('onDel', index)
    }
    const handleChecked = (index) => {
      emit('onChecked', index)
    }
    return {
      list,
      handleDel,
      handleChecked,
      Delete,
    }
  },
})
</script>
<style scoped lang="scss">
.todo {
  &-list {
    margin: 10px 0;
    padding: 0 10px;
  }
  &-item {
    display: flex;
    justify-content: space-between;
  }
  &-nodata {
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color: #999999;
  }
}
</style>
